<template>
  <view class="page">
    <view class="head">
      <view class="head__inn">
        <text>订单号：{{ code }}</text>
        <view class="head__right">
          <image class="head__icon" src="~@/static/logo.png" />
        </view>
      </view>
    </view>
    <view class="count">
      <text>支付金额</text>
      <view class="count__price">
        <text>￥</text>
        <text class="big">{{ price }}</text>
      </view>
      <view class="count__time">
        支付剩余时间：
        <uni-countdown color="#FBBF0D" splitorColor="#FBBF0D" :show-day="false" :hour="0" :minute="10" :second="0" />
      </view>
    </view>
    <view class="info">
      <view class="info__row">
        <text>车牌号码</text>
        <text class="info__value">{{ number }}</text>
      </view>
      <view class="info__row">
        <text>车位</text>
        <text class="info__value">{{ placeCode }}</text>
      </view>
      <view class="info__row">
        <text>停车时长</text>
        <text class="info__value">{{ time }}</text>
      </view>
      <view class="info__row">
        <text>入库时间</text>
        <text class="info__value">{{ startTime }}</text>
      </view>
    </view>
    <view class="pay">
      <view @click="payType = 'wx_pay'" class="pay__row">
        <view class="pay__left">
          <image class="pay__icon" src="~@/static/order/weixinPay.png" />
          <text>微信支付</text>
        </view>
        <image v-if="payType === 'wx_pay'" class="pay__checkbox" src="~@/static/shop/checkboxTrue.png" />
        <image v-else class="pay__checkbox" src="~@/static/shop/checkboxFalse.png" />
      </view>
      <view @click="payType = 'zfb_pay'" class="pay__row">
        <view class="pay__left">
          <image class="pay__icon" src="~@/static/order/zfbPay.png" />
          <text>支付宝支付</text>
        </view>
        <image v-if="payType === 'zfb_pay'" class="pay__checkbox" src="~@/static/shop/checkboxTrue.png" />
        <image v-else class="pay__checkbox" src="~@/static/shop/checkboxFalse.png" />
      </view>
    </view>
    <view @tap="confirmPay" class="global-btn">确认支付</view>
    <popup ref="popup"/>
  </view>
</template>

<script>
import { getRecordInfoAPI, parkingPayAPI } from '@/api/record';

export default {
  data() {
    return {
      number: '',
      code: '-',
      price: '0.00',
      placeCode: '-',
      time: '-',
      startTime: '-',
      payType: 'wx_pay', // 微信支付-wx_pay 支付宝支付-zfb_pay
    }
  },
  onLoad(options) {
    this.number = decodeURIComponent(options.number);
    this.getRecordInfo();
  },
  methods: {
    getRecordInfo() {
      getRecordInfoAPI({
        number: this.number
      }).then(res => {
        this.code = res.orderCode;
        this.price = res.price.toFixed(2);
        this.placeCode = res.placeCode;
        this.time = res.time;
        this.startTime = res.startTime ? this.YD_dateFormat(res.startTime, 'text hh:mm:ss') : '-';
      })
    },
    /** @name 提交支付 **/
    confirmPay() {
      parkingPayAPI({
        number: this.number,
        payType: this.payType,
      }).then(() => {
        this.$refs.popup.success('缴费成功');
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 400)
      })
    }
  }
}
</script>

<style lang="scss">
.page {
  box-sizing: border-box;
  padding: 24rpx;
}
.head {
  width: 100%;
  height: 72rpx;
  font-size: 24rpx;
  color: #333;
  box-sizing: border-box;
  padding: 0 44rpx;
  margin-bottom: 48rpx;
}
.head__inn {
  border-bottom: 2rpx solid #EEEEEE;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head__right {
  color: #FBBF0D;
  display: flex;
  align-items: center;
}
.head__icon {
  width: 52rpx;
  height: 52rpx;
  margin-bottom: 4rpx;
}
.count {
  color: #999;
  font-size: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.count__price {
  margin-top: 28rpx;
  display: flex;
  align-items: baseline;
  color: #000;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 1;
  .big {
    font-size: 72rpx;
  }
}
.count__time {
  margin-top: 36rpx;
  margin-bottom: 48rpx;
  color: #333;
  display: flex;
  align-items: center;
  .yellow {
    color: #FFB100;
  }
}
.info {
  background-color: #fff;
  border-radius: 14rpx;
  box-sizing: border-box;
  padding: 12rpx 24rpx;
  margin-bottom: 24rpx;
  font-size: 26rpx;
  color: #AAA;
}
.info__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8rpx 0;
}
.info__value {
  color: #444;
}
.pay {
  background-color: #fff;
  border-radius: 14rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
}
.pay__row {
  width: 100%;
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #444;
  font-size: 26rpx;
  border-bottom: 2rpx solid #EAEBEC;
  &:last-child {
    border-bottom: none;
  }
}
.pay__icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}
.pay__checkbox {
  width: 40rpx;
  height: 40rpx;
}
</style>
